<template>
  <el-dialog v-model="dialogVisible" center width="70%"  :append-to-body = "true" :close-on-click-modal="false" :before-close="handleClose" @close="onClose" style="background-color: #f5f6f8;box-sizing: border-box">
    <div class="flex justify-content-center align-center" style="margin-top: 20px">
        <div class="flex-auto"></div>
        <div class="flex-auto create-activity-title" style="text-align: center;font-size: 22px;color: #333333;font-weight: bolder;">新建组织活动</div>
        <div class="flex-auto" style="text-align: right"><el-button  type="primary">保存</el-button></div>
    </div>
    <el-form :model="form" label-width="100px" :rules="rules" ref="formRef" label-position="top">
      <!-- 上板块  -->
      <div style="margin-top: 20px" class="flex justify-content-space-between" >
      <!-- 左边板块 -->
      <div class="flex-auto" style="background-color: #ffffff;padding: 20px;margin-right: 10px">
          <div style="width: 100%;border-bottom: 1px solid #dedcdc;padding:0 0 10px 0;margin: 0 0 20px 0;font-size: 18px;color: #3d3838;font-weight: bolder">基本信息</div>
          <div class="list">
            <el-form-item label="活动类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择活动类型" style="width: 100%">
                <el-option label="三会一课" value="party" />
                <el-option label="主题党日" value="theme" />
                <el-option label="民主生活会" value="life" />
                <el-option label="民主评议" value="evaluation" />
              </el-select>
            </el-form-item>
            <el-form-item label="活动主题" prop="title">
              <el-input v-model="form.title" placeholder="请输入活动主题" />
            </el-form-item>
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="开始时间" prop="startTime" >
                  <el-date-picker v-model="form.startTime" type="date" style="width: 100%" value-format="YYYY-MM-DD" placeholder="选择开始时间" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="结束时间" prop="endTime">
                  <el-date-picker v-model="form.endTime" type="date" style="width: 100%" value-format="YYYY-MM-DD" placeholder="选择结束时间" />
                </el-form-item>
              </el-col>

            </el-row>
            <el-form-item label="活动地点" prop="location">
              <el-input v-model="form.location" placeholder="请输入活动地点">
                <template #append>
                  <el-icon><LocationFilled /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="活动内容" prop="content">
              <el-input v-model="form.content" type="textarea" :rows="3" placeholder="请输入活动内容..." style="width: 100%"/>
            </el-form-item>
          </div>
      </div>
      <!-- 右边板块 -->
      <div class="flex-auto" style="background-color: #ffffff;padding: 20px;margin-left: 10px">
        <div style="width: 100%;border-bottom: 1px solid #dedcdc;padding:0 0 10px 0;margin: 0 0 20px 0;font-size: 18px;color: #3d3838;font-weight: bolder">参与人员</div>
        <el-form-item label="活动责任人" prop="responsible">
          <el-select v-model="form.responsible" placeholder="请选择责任人" style="width: 100%">
            <el-option label="张建国" value="zhang" />
            <el-option label="李卫红" value="li" />
            <el-option label="王学军" value="wang" />
          </el-select>
        </el-form-item>
        <div class="flex">
         <div class="count-control" style="background-color: #f3f3f6;border-radius: 10px;padding: 10px 20px;">
          <div style="padding-bottom: 10px;">计划参与人数</div>
         <div class="flex">
           <el-input-number  style="height: 35px" v-model="form.content" :step="1" />
           <el-button type="primary" style="height: 35px;margin-left: 10px">保存</el-button>
         </div>
       </div>
          <!--  签到人数  -->
         <div class="count-control flex-auto" style="margin: 0 20px;background-color: #f3f3f6;border-radius: 10px;padding: 10px 20px;">
           <div style="padding-bottom: 10px;" class="flex align-center">
             <el-icon style="font-size: 18px"><Avatar /></el-icon>
             <span style="padding-left: 10px">签到人数</span>
           </div>
           <div style="font-size: 26px; color: #00C94F">0</div>
         </div>
          <!--  请假人数  -->
          <div class="count-control flex-auto" style="background-color: #f3f3f6;border-radius: 10px;padding: 10px 20px;">
            <div style="padding-bottom: 10px;" class="flex align-center">
              <el-icon style="font-size: 18px"><Avatar /></el-icon>
              <span style="padding-left: 10px">请假人数</span>
            </div>
            <div style="font-size: 26px; color: #EF6363">2</div>
          </div>
        </div>
        <div style="padding: 20px 0">选择必须参加活动的党员（没有要求不必选择）</div>
        <div class="person-container" style="border: 1px solid #E1E3E7; border-radius: 5px;min-height: 200px">
          <div class="flex" style="margin: 10px">
              <el-input v-model="input2" class="responsive-input" placeholder="搜索党员" :prefix-icon="Search"/>
              <el-button  type="primary" style="margin-left: 12px">添加</el-button>
          </div>
          <div class="person-wrapper">
            <div class="item flex justify-content-space-between align-center " style="padding: 0 10px;margin-top: 10px">
               <div style="background-color: #E5E7EB;width:30px;height:30px;border-radius: 50%;color: #333333;font-size: 16px;" class="flex align-center justify-content-center">张</div>
               <div style="color: black; padding: 0 10px;font-size: 16px;" class="flex-auto">张建国</div>
               <img style="width: 20px;height: 20px;" class="flex align-center justify-content-center" src="../../../../assets/images/错误.png" alt="">
            </div>
            <div class="item flex justify-content-space-between align-center " style="padding: 0 10px;margin-top: 10px">
              <div style="background-color: #E5E7EB;width:30px;height:30px;border-radius: 50%;color: #333333;font-size: 16px;" class="flex align-center justify-content-center">李</div>
              <div style="color: black; padding: 0 10px;font-size: 16px;" class="flex-auto">李卫红</div>
              <img style="width: 20px;height: 20px;" class="flex align-center justify-content-center" src="../../../../assets/images/错误.png" alt="">
            </div>
            <div class="item flex justify-content-space-between align-center " style="padding: 0 10px;margin-top: 10px">
              <div style="background-color: #E5E7EB;width:30px;height:30px;border-radius: 50%;color: #333333;font-size: 16px;" class="flex align-center justify-content-center">王</div>
              <div style="color: black; padding: 0 10px;font-size: 16px;" class="flex-auto">王学军</div>
              <img style="width: 20px;height: 20px;" class="flex align-center justify-content-center" src="../../../../assets/images/错误.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>

      <!-- 中板块  -->
      <div style="margin-top: 20px">
        <div style="background-color: #ffffff;padding: 20px;margin-right: 10px">
          <div style="width: 100%;border-bottom: 1px solid #dedcdc;padding:0 0 10px 0;margin: 0 0 20px 0;font-size: 18px;color: #3d3838;font-weight: bolder">活动管理</div>
          <div class="flex justify-content-space-between">
            <div style="margin-right: 10px" class="flex-auto">
              <div class="sign_manager">签到管理</div>
              <div class="flex" style="margin-top: 10px">
                <div class="flex-auto" style="border: 1px solid #eeeef3;border-radius: 10px;margin-right: 5px;padding: 10px;">
                  <div class="img-box flex justify-content-center align-center" style="background-color: #F9FAFB;padding: 30px 0;border-radius: 10px">
                    <img src="" style="width: 30px;height: 30px;" alt="">
                  </div>
                  <div style="text-align: center;color: #3B3B3B;font-size: 16px;font-weight: bolder;margin-top: 10px">二维码签到</div>
                  <div style="text-align: center;color: #999999;font-size: 12px">扫码快速签到</div>
                </div>
                <div class="flex-auto" style="border: 1px solid #eeeef3;border-radius: 10px;margin-left: 5px;padding: 10px;">
                  <div class="img-box flex justify-content-center align-center" style="background-color: #F9FAFB;padding: 30px 0;border-radius: 10px">
                    <img src="" style="width: 30px;height: 30px;" alt="">
                  </div>
                  <div style="text-align: center;color: #3B3B3B;font-size: 16px;font-weight: bolder;margin-top: 10px">手动签到</div>
                  <div style="text-align: center;color: #999999;font-size: 12px">线下登记签到</div>
                </div>
              </div>
              <!-- 搜索党员姓名 -->
              <div class="sign-person-container" style="border: 1px solid #eeeef3;margin-top: 20px;border-radius: 10px;padding: 20px">
                 <div class="flex align-center justify-content-space-between">
                   <el-input v-model="input2" class="responsive-input" placeholder="搜索党员姓名" :prefix-icon="Search"/>
                   <el-button style="margin-left: 20px"  type="primary" icon="Plus">添加签到</el-button>
                 </div>

                 <div class="flex justify-content-space-between" style="margin-top: 20px">
                     <div style="color: black;font-weight: bolder">已签到人员</div>
                     <div>共<span style="color: red;padding: 0 5px">10</span>人</div>
                 </div>
                <!---------------------------------------------->
                <div class="sign-in-list" style="height: 285px;">
                  <div v-for="(item, index) in signList" :key="index" class="sign-item" style="width: 48%;">
                    <!-- 头像 -->
                    <div class="avatar">{{ item.name.charAt(0) }}</div>
                    <!-- 姓名与时间 -->
                    <div style="flex: 1;">
                      <div style="font-weight: bold; color: #333;">{{ item.name }}</div>
                      <div style="color: #999; font-size: 12px;">今天 {{ item.time }}</div>
                    </div>
                    <!-- 状态标签 -->
                    <div class="status">已签到</div>
                  </div>
                </div>
                <!---------------------------------------------->
              </div>
            </div>
            <div style="margin-left: 10px" class="flex-auto">
              <div class="sign_manager">请假管理</div>
              <!-- 搜索党员姓名 -->
              <div class="sign-person-container" style="border: 1px solid #eeeef3;margin-top: 20px;border-radius: 10px;padding: 20px">
                <div class="flex align-center justify-content-space-between">
                  <el-input v-model="input2" class="responsive-input" placeholder="搜索党员姓名" :prefix-icon="Search"/>
                  <el-button style="margin-left: 20px"  type="primary" icon="Plus">添加签到</el-button>
                </div>
                <div class="flex justify-content-space-between" style="margin-top: 20px">
                  <div style="color: black;font-weight: bolder">请假人员</div>
                  <div>共<span style="color: red;padding: 0 5px">10</span>人</div>
                </div>
                <div class="sign-in-list"  style="height: 458px;">
                  <div v-for="(item, index) in leaveList" :key="index" class="sign-item" style="width: 100%;">
                    <!-- 头像 -->
                    <div class="avatar">{{ item.name.charAt(0) }}</div>
                    <!-- 姓名与时间 -->
                    <div style="flex: 1;">
                      <div style="font-weight: bold; color: #333;">{{ item.name }}</div>
                      <div style="color: #999; font-size: 12px;">{{item.reason}}</div>
                    </div>
                   <div class="flex align-center">
                     <div v-if="item.status==0">
                       <el-button size="small" type="success">同意</el-button>
                       <el-button size="small" type="primary">拒绝</el-button>
                     </div>
                     <!-- 状态标签 -->
                     <div class="status" v-if="item.status==1">已批准</div>
                     <div class="status" v-if="item.status==2">未批准</div>
                   </div>
                  </div>
                </div>
                <!---------------------------------------------->
              </div>
            </div>
          </div>
          <!------活动状态------>
          <div style="margin-top: 20px">
            <span>活动状态</span>
            <span style="color: red;margin-left: 5px">*</span>
          </div>
          <div class="status-container  flex justify-content-space-between" style="margin-top: 20px">
            <div class="status-item flex-auto flex  align-center justify-content-center"
                 :style="index === 1 ? { margin: '0 20px',border: '2px solid #F07278'} : { margin: '0 0'}"
                 v-for="(item, index) in statusList" :key="index">
              <div class="icon-box ">
                <img src="" style="width: 30px;height: 30px;display: block;margin: 0 auto" class="border" alt="">
                <div class="status-desc" >{{item.desc}}</div>
              </div>

            </div>
          </div>
          </div>

        <!------补充信息------>
        <div class="flex-auto" style="background-color: #ffffff;padding: 20px;margin-right: 10px;margin-top: 20px;">
          <div style="width: 100%;border-bottom: 1px solid #dedcdc;padding:0 0 10px 0;margin: 0 0 20px 0;font-size: 18px;color: #3d3838;font-weight: bolder">基本信息</div>
          <div style="margin-top: 20px">活动详情说明</div>
          <!-- 引入封装的富文本组件 -->
          <WangEditor ref="editorRef"
                      v-model="editorContent"
                      :height="200"
                      :toolbarConfig="toolbarConfig"
                      :editorConfig="editorConfig"
                      @change="onContentChange"
                      @created="onEditorCreated">
          <!-- 插槽：工具栏上方的自定义按钮 -->
<!--          <template #toolbar-actions>-->
<!--            <button type="button" class="action-btn" @click="insertCustomText">插入默认文本</button>-->
<!--            <button type="button" class="action-btn" @click="getEditorText">获取纯文本</button>-->
<!--            <button type="button" class="action-btn" @click="toggleDisable">{{ isDisabled ? '启用编辑' : '禁用编辑' }}</button>-->
<!--            <button type="button" class="action-btn" @click="clearAllContent">清空内容</button>-->
<!--          </template>-->

          </WangEditor>
        </div>
        <!------补充信息end------>
      </div>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer  flex justify-content-end" style="margin-right: 10px">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" >提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Calendar,Plus,Search } from '@element-plus/icons-vue'
import WangEditor from './WangEditor.vue';
// 接收父组件传递的 visible 开关
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

// 发送事件给父组件
const emit = defineEmits(['update:modelValue', 'save']);

// 弹窗可见性
const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});
// 表单数据
const form = reactive({
  type: '',
  title: '',
  startTime: '',
  endTime: '',
  location: '',
  content: ''
});
// 表单引用
const formRef = ref(null)
// 表单校验规则
const rules = {
  type: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
  title: [{ required: true, message: '请输入活动主题', trigger: 'blur' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  location: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
  content: [{ required: true, message: '请输入活动内容', trigger: 'blur' }]
};
const signList = [
  { name: '张建国', time: '14:30' },
  { name: '李卫红', time: '14:25' },
  { name: '王学军', time: '14:20' },
  { name: '赵静怡', time: '14:15' },
  { name: '孙明德', time: '14:10' },
  { name: '周海燕', time: '14:05' },
  { name: '吴光明', time: '14:00' },
  { name: '李卫红', time: '14:25' },
  { name: '王学军', time: '14:20' },
  { name: '赵静怡', time: '14:15' },
  { name: '孙明德', time: '14:10' },
  { name: '周海燕', time: '14:05' },
  { name: '吴光明', time: '14:00' },
  { name: '徐志远', time: '13:55' },
  { name: '徐志远', time: '13:55' }
]
const leaveList = [
  { name: '张建国', reason: '14:30', status: 0 },
  { name: '李卫红', reason: '14:25', status: 1 },
  { name: '王学军', reason: '14:20', status: 2 },
  { name: '赵静怡', reason: '14:15', status: 1 },
  { name: '孙明德', reason: '14:10', status: 0 },
  { name: '周海燕', reason: '14:05', status: 2 },
  { name: '吴光明', reason: '14:00', status: 1 },
  { name: '李卫红', reason: '14:25', status: 0 },
]
const statusList = [
    { icon: '', desc: '筹备中'},
    { icon: '', desc: '进行中'},
    { icon: '', desc: '已结束'}
]
// 取消
const cancel = () => {
  ElMessageBox.confirm('是否放弃当前操作？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogVisible.value = false;
  });
};
// 关闭弹窗
const handleClose = () => {
  ElMessageBox.confirm('是否放弃当前操作？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogVisible.value = false;
  }).catch(() => {});
};

// 弹窗关闭时清空表单
const onClose = () => {

};

// =============富文本编辑器===================
const editorContent = ref('<p>欢迎使用富文本编辑器</p>'); // 编辑器内容（双向绑定）
const editorRef = ref(null); // 组件引用（用于调用内部方法）
const isDisabled = ref(false); // 禁用状态

// 工具栏配置
const toolbarConfig = reactive({});
// 2. 编辑器配置：控制编辑器本身的行为
const editorConfig = reactive({placeholder: '请输入内容...'});
// 编辑器创建完成时触发
const onEditorCreated = (editor) => {
  console.log('编辑器初始化完成', editor);
};
// 内容变化时触发
const onContentChange = (editor) => {
  console.log('当前内容：', editor.getHtml());
};
// 插入自定义文本
const insertCustomText = () => {
  editorRef.value?.insertText('这是插入的文本内容');
};
// 获取纯文本内容
const getEditorText = () => {
  const text = editorRef.value?.getText();
  alert('纯文本内容：\n' + text);
};
// 切换禁用/启用状态
const toggleDisable = () => {
  isDisabled.value = !isDisabled.value;
  if (isDisabled.value) {
    editorRef.value?.disable();
  } else {
    editorRef.value?.enable();
  }
};
// 清空内容
const clearAllContent = () => {
  editorRef.value?.clear();
};













</script>
<style scoped lang="scss">
.create-activity {
  padding: 20px;
  background: #f9f9f9;
}
.footer {
  text-align: right;
  margin-top: 30px;
}
.sign-in-list {
  background-color: #F9FAFB;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;
  margin-top: 10px;
  .sign-item{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 14px;
    .avatar{
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #E5E7EB;
      border-radius: 50%;
      margin-right: 10px;
      font-size: 16px;
      color: #333333;
    }
    .status{
      color: #22C45E;
      font-size: 12px;
      padding: 2px 6px;

      border-radius: 4px;
    }
  }
}
.status-container{
  background-color: #FFFFFF;
  .status-item{
   padding: 20px 0;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    .status-desc{
      margin-top: 10px;
      color: #333333;
      font-weight: bolder;
      text-align: center;
    }
  }

}
</style>
